<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <title>My Personal Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <p:layout style="min-width:1000px;min-height:1000px;">
            <p:layoutUnit position="west" resizable="true" size="220" minSize="80" maxSize="300">
                    <h:form id="button">
                        <br></br>
                        <p:commandButton id="viewPersonal" value="Personal Page" action="#{searchUserBean.uploadPersonalPage()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="newEvent" value="New Event" action="new-event" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchUser" value="Browse User" action="#{searchBean.browseUsers()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchEvent" value="Search Event" action="search-event-page" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="logout" value="Logout" action="#{loginBean.logout()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="mainPage" value="Main Page" action="main-page?faces-redirect=true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        </h:form>
                </p:layoutUnit>
 

                <p:layoutUnit position="center" resizable="true" size="700" minSize="100" maxSize="600">
                    <h:form>
                        <p:panel id='personalp' header='Personal Informations' style="border: none">
                                <h:panelGrid columns="3"  id='personal-panel' style="border-color: #ffffff;width: 800px;width:100%" cellpadding="7" columnClasses="label,value">
                                    <h:outputLabel style="font-weight: bold;" value="Username: " />
                                    <h:outputText value="#{searchUserBean.selectedUser.username}" />
                                    <h:outputText value=" " />
                                   
                                    <h:outputLabel style="font-weight: bold;" value="Name and surname: " />
                                    <h:outputText value="#{searchUserBean.selectedUser.name}" />
                                    <h:outputText value=" " />
                                    
                                    <h:outputLabel style="font-weight: bold;" value="Email: " />
                                    <h:outputText value="#{searchUserBean.selectedUser.email}" />
                                    <h:outputText value=" " />

                                    <h:outputLabel style="font-weight: bold;" value="City: " />
                                    <h:outputText value="#{searchUserBean.selectedUser.city}" />
                                    <h:outputText value=" " />

                                    <h:outputLabel style="font-weight: bold;" value="Phone Number: " />
                                    <h:outputText value="#{searchUserBean.selectedUser.phonenumber}" />
                                    <h:outputText value=" " />

                                    <h:outputLabel style="font-weight: bold;" value="Avatar: " />
                                    <h:outputText value="#{searchUserBean.selectedUser.avatar}" />
                                    <h:outputText value=" " />

                                    <h:outputLabel style="font-weight: bold;" value="Privacy Level: " />
                                    <h:outputText value="#{searchUserBean.selectedUser.privacyLevel}" />
                                    <h:outputText value=" " />


                                    <p:commandButton id="modifyEvent" disabled="#{! searchUserBean.canModify}" value="Modify" action="modify-personal-page?faces-redirect=true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                                    </p:commandButton>
                                    <p:commandButton id="deleteUser" disabled="#{! searchUserBean.canModify}" value="Delete User" action="#{userBean.deleteUser()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                                        <f:setPropertyActionListener value="#{searchUserBean.selectedUser}" target="#{userBean.user}" />  
                                    </p:commandButton>
                                    <p:commandButton id="changeCalendar" disabled="#{! searchUserBean.canModify}" value=" Modify Privacy" action="#{userBean.modifyCalendar()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                                        <f:setPropertyActionListener value="#{searchUserBean.selectedUser}" target="#{userBean.user}" />  
                                    </p:commandButton>
                                </h:panelGrid>
                            </p:panel>
                        <div align="center">
                            <p:growl id="growl" life="2000" />
                        </div>
                    </h:form>
                </p:layoutUnit>
        </p:layout>
    </h:body>
</html>
